<html>
<head>
	<title>tab slider</title>
	<style>
	body{
		text-align: center;
	}
	.tabs {
		align: center;
		width: 500px;
		height: 80px;
		margin: 0 auto;
	}
	.tab{
		float: left;
		width: 25%;
		height: 60px;
	}
	.tabs .current {
		color: red;
	}
	.highlight {
		width: 125px;
		height: 4px;
		background-color: red;
		margin-top: 30px;
		position: absolute;
		transition: transform .6s,-webkit-transform .6s;
	}
	
	</style>
</head>
<body>
	<div class="tabs">
		<div class="tab current" index="0">tab1</div>
		<div class="tab" index="1">tab2</div>
		<div class="tab" index="2">tab3</div>
		<div class="tab" index="3">tab4</div>
		<div class="highlight"></div>
	</div>
	<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
	<script>
		$('.tab').on('click', function(){
			$(this).addClass('current').siblings().removeClass('current');
			var index = $(this).attr('index');
			$('.highlight').attr('style','transform:translateX('+index+'00%)');
		});
	</script>
</body>
</html>